<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span{
            width: 60px;
            height: 20px;
            display: inline-block;
            background: palegoldenrod;
            text-align: center;
            font-size: 18px;
            line-height: 20px;
        }
    </style>
</head>
<body>
    <input type="text" placeholder="输入验证码"><span></span><button>提交</button>
    <div></div>
    <script>
        var sp=document.getElementsByTagName("span");
        sp[0].innerText=parseInt(Math.random()*9000+1000);
        var btn=document.getElementsByTagName("button");
        sp[0].onclick=function(){
            this.innerText=parseInt(Math.random()*9000+1000);
        }
        btn[0].onclick=function(){
            if(sp[0].innerText===document.getElementsByTagName("input")[0].value){
                document.getElementsByTagName("div")[0].innerText="验证通过";
            }
            else
             document.getElementsByTagName("div")[0].innerText="验证不通过";
             sp[0].innerText=parseInt(Math.random()*9000+1000);
        }
        
    </script>
</body>
</html>
